<template>
	<view class="container">
		<!-- 搜索框 -->
		<view class="search-bar">
			<input v-model="searchQuery" class="search-input" placeholder="请输入场馆名称进行搜索" @input="searchVenue" />
		</view>

		<!-- 场馆列表 -->
		<view class="venue-list">
			<view v-for="(venue, index) in filteredVenues" :key="index" class="venue-card">
				<image :src="`http://localhost:8080${venue.imageUrl}`" class="venue-image" />
				<view class="venue-content">
					<text class="venue-name">球场名称: {{ venue.name }}</text>
					<text class="venue-address">球场地址: {{ venue.address }}</text>
					<!-- 添加营业时间 -->
					<text class="venue-hours">营业时间: {{ venue.businessHours }}</text>
				</view>
				<!-- 按钮绑定点击事件，传递 venue.id -->
				<button class="action-btn" @click="viewVenueDetails(venue)">查看详情</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getVenueList
	} from '@/api/venue/venue.js';

	export default {
		data() {
			return {
				venues: [], // 存储场馆数据
				searchQuery: "", // 搜索框输入内容
			};
		},
		computed: {
			// 计算过滤后的场馆列表
			filteredVenues() {
				if (!this.searchQuery) {
					return this.venues;
				}
				return this.venues.filter(venue =>
					venue.name.toLowerCase().includes(this.searchQuery.toLowerCase())
				);
			},
		},
		mounted() {
			this.fetchVenues();
		},
		methods: {
			// 获取场馆数据
			fetchVenues() {
				getVenueList()
					.then((res) => {
						this.venues = res.data;
						console.log(res);
					})
					.catch((res) => {
						console.log(res);
					});
			},

			// 处理搜索
			searchVenue() {
				console.log("搜索关键词:", this.searchQuery);
			},

			// 查看场馆详情
			viewVenueDetails(venue) {
				console.log("查看场馆详情:", venue);
				uni.navigateTo({
					url: `/pages/stadium/court?venue=${encodeURIComponent(JSON.stringify(venue))}`
				});
			}


		},
	};
</script>

<style scoped>
	/* 页面容器 */
	.container {
		padding: 20px;
		background-color: #f7f8fa;
		font-family: 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	}

	/* 搜索框样式 */
	.search-bar {
		margin-bottom: 20px;
		display: flex;
		justify-content: center;
	}

	.search-input {
		width: 100%;
		padding: 12px;
		font-size: 16px;
		border-radius: 8px;
		border: 1px solid #ddd;
		background-color: #fff;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	}

	/* 场馆列表样式 */
	.venue-list {
		display: flex;
		flex-wrap: wrap;
		gap: 20px;
		justify-content: center;
	}

	.venue-card {
		width: 320px;
		background-color: #fff;
		border-radius: 10px;
		box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
		padding: 20px;
		transition: transform 0.3s ease, box-shadow 0.3s ease;
	}

	.venue-card:hover {
		transform: translateY(-5px);
		box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
	}

	.venue-image {
		width: 100%;
		height: 180px;
		object-fit: cover;
		border-radius: 10px;
		margin-bottom: 15px;
	}

	/* 修改场馆名称和地址的样式，使其占用各自的行 */
	.venue-content {
		margin-bottom: 15px;
	}

	.venue-name,
	.venue-address,
	.venue-hours {
		font-size: 16px;
		margin-bottom: 5px;
		/* 增加一点间距 */
		display: block;
		/* 使其占用一行 */
	}

	.venue-hours {
		color: #888;
		/* 设置营业时间文字颜色 */
	}

	/* 按钮样式 */
	.action-btn {
		padding: 10px 18px;
		background-color: #007aff;
		color: #fff;
		border: none;
		border-radius: 25px;
		font-size: 14px;
		cursor: pointer;
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
		transition: background-color 0.3s ease, transform 0.3s ease;
	}

	.action-btn:hover {
		background-color: #005bb5;
		transform: translateY(-2px);
	}

	.action-btn:active {
		transform: translateY(1px);
	}

	/* 响应式布局 */
	@media (max-width: 768px) {
		.venue-card {
			width: 100%;
			margin-bottom: 20px;
		}
	}
</style>